<template>
    <div>
        <el-dialog v-model="props.isShow" :title="props.isAdd ? '添加角色' : '编辑角色'" center :before-close="beforeClose">
            <el-form :model="roleForm" :rules="rules" ref="roleRef">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                    <el-input v-model="roleForm.rolename" autocomplete="off" />
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree :data="store.getters['menu/getMenu']" ref="tree" show-checkbox node-key="id" default-expand-all
                        :expand-on-click-node="false" :props="{
                            children: 'children',
                            label: 'title'
                        }"  check-strictly/>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        v-model="roleForm.status" :active-value="1" :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="cancel(roleRef)">取消</el-button>
                    <el-button type="primary" @click="confirm(roleRef)">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts' setup>
// 引入仓库
import { useStore } from 'vuex'
// 引入接口
import { roleAdd, roleEdit, roleInfo } from '@/request/api'
// 引入props
import { defineProps, reactive, ref, defineEmits, defineExpose } from 'vue'
// 引入规则验证
import { FormRules, FormInstance, ElMessage} from 'element-plus'
const formLabelWidth = "120px"
let roleRef = ref<FormInstance>()
let tree=ref()
// 接收显示隐藏
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
// 定义表单
const roleForm = ref({
    rolename: '',//角色名称string
    menus: '',//角色权限 id数组'2,3,4' 字符串
    status: 1,//状态1正常2禁用number
})
// 规则验证
const rules = reactive<FormRules>({
    rolename: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 2, max: 8, message: 'Length should be 2 to 8', trigger: 'blur' },
    ],
})
// 调用子传父cancel
let emit = defineEmits(['cancel'])
// 取消事件
const cancel = (formEl: FormInstance | undefined) => {
    emit('cancel', false)
    if (!formEl) return
    // 清除规则验证
    formEl.resetFields()
}
// 关闭x
const beforeClose = (done: () => {}) => {
    done()
    cancel(roleRef.value)
}
// 获取仓库列表
let store = useStore()
const getMenu = ()=>{
    store.dispatch('menu/getMenuAction')
}
getMenu()
const getRole = () => {
    store.dispatch('role/getRoleAction')
}
// 数据回显事件
let newId = 0
const lookup = (id: number) => {
    // 调用一条数据接口
    roleInfo({ id }).then(res => {
        roleForm.value = res.list as any
        newId = id
    })
}
// 确定事件
const confirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(val => {
        if (val) {
            roleForm.value.menus=tree.value.getCheckedKeys().join(',')        
            // console.log(roleForm.value);
            // 调用添加接口
            if (props.isAdd) {
                roleAdd(roleForm.value).then(res => {
                    if (res.code == 200) {
                        ElMessage.success(res.msg)
                        // 弹框关闭
                        cancel(roleRef.value)
                        // 重新调用列表
                        getRole()
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            } else {
                // 调用编辑接口
                roleEdit({ ...roleForm.value, id: newId }).then(res => {
                    if (res.code == 200) {
                        ElMessage.success(res.msg)
                        // 关闭弹框
                        cancel(roleRef.value)
                        // 重新调用列表
                        getRole()
                    }
                })
            }

        }
    })
}
defineExpose({
    lookup
})

</script>
<style scoped></style>